<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>增加用户</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 14px;
            line-height: 1.42857143;
            color: #333;
            background-color: #fff;
        }
        h1 {
            font-size: 36px;
            margin: 20px 0;
        }
        form {
            margin: 20px;
        }
    </style>
    <link rel="stylesheet" href="../../plugins/element-ui/index.css" />
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../../plugins/vue/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../../plugins/element-ui/index.js"></script>
    <!-- 引入axios -->
    <script src="../../plugins/axios/axios.min.js"></script>
</head>
<body>
<div id="app">
    <a href="../user/list.html">返回用户列表</a><br><br>
    <h1>增加用户</h1>
    <el-form :rules="rules" ref="form" :model="form" label-width="100px">
        <el-form-item label="用户名">
            <el-input v-model="form.username" ></el-input>
        </el-form-item>
        <el-form-item label="密码">
            <el-input type="password" v-model="form.password" ></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
            <el-input type="email" v-model="form.email" ></el-input>
        </el-form-item>
        <el-form-item label="状态" v-model="form.status">
            <el-radio-group v-model="form.status">
                <el-radio label="1">启用</el-radio>
                <el-radio label="0">禁用</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="地址">
            <el-input type="text" v-model="form.address" ></el-input>
        </el-form-item>
        <el-form-item label="角色">
            <el-select v-model="form.role">
                <el-option label="管理员" value="ADMIN"></el-option>
                <el-option label="普通用户" value="USER"></el-option>
                <el-option label="商家" value="MERCHANT"></el-option>
                <el-option label="配送员" value="DELIVERY"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
        </el-form-item>
    </el-form>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            form: {
                username: '',
                password: '',
                email: '',
                status: 1,
                address: '',
                role: 'USER'
            },
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, message: '密码长度不能小于 6 个字符', trigger: 'blur' }
                ],
                email: [
                    { required: true, message: '请输入邮箱', trigger: ['blur', 'change'] },
                    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                ],
                status: [
                    { required: true, message: '请选择状态', trigger: 'change' }
                ],
                address: [
                    { required: true, message: '请输入地址', trigger: 'blur' }
                ],
                role: [
                    { required: true, message: '请选择角色', trigger: 'change' }
                ]
            }
        },
        methods: {
            onSubmit() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        // 发送请求，增加用户
                        axios.post('/user/add', this.form)
                           .then(response => {
                               if (response.data !== null){
                                   alert('增加用户成功');
                                   window.location.href = '../user/list.html';
                               }else{
                                   alert('用户名已存在');
                               }
                            })
                           .catch(error => {
                                console.log(error);
                                alert('增加用户失败');
                            });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
        }
    });
</script>
</body>
</html>